<template>
    <!-- 部门选择 -->
    <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" v-model="currentValue" allowClear>
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
        <a-select-option v-else v-for="i in department" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
    </a-select>
</template>
<script>
import { getProjectInfo, getDepartmentList } from '@/api/businessAffairs/revenueAndCost'
export default {
    inheritAttrs: false,
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object],
        },
        // 需要联动的表单名，
        form: {
            type: Object,
            default: function () {
                return {}
            },
        },
        placeholder: {
            type: String,
            default: function () {
                return '请选择'
            },
        },
        // 需要联动的表单名
        keyValue: {
            type: String,
            default: function () {
                return 'project'
            },
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default() {
                return true
            },
        },
        isObj: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    data() {
        return {
            fetching: false,
            department: [],
        }
    },
    methods: {
        getProjectInfo(params) {
            this.fetching = true
            let data = {
                projectId: params.query.branchComIds[0],
            }
            getProjectInfo(data).then((res) => {
                console.log(res)
                this.getDepartmentList(res.data.projectDeptOrgId)
            })
        },
        getDepartmentList(id) {
            let data = {
                id: id,
                type: '2',
            }
            getDepartmentList(data)
                .then((res) => {
                    this.fetching = false
                    console.log(res)
                    if (res.status === 200) {
                        this.department = res.data
                    } else {
                        this.$message.error('err:', res.message)
                    }
                })
                .catch((res) => {
                    this.fetching = false
                })
        },
    },
    computed: {
        // 需要联动的表单值
        attr() {
            console.log(this.isObj)
            if (this.isObj) {
                // this.form[this.keyValue]
                return this.form[this.keyValue]?.key
            } else {
                return this.form[this.keyValue]
            }
        },
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    mounted() {
        let val = this.attr
        val && this.getProjectInfo({ query: { branchComIds: [val] } })
    },
    watch: {
        // 监听联动表单值重置项目列表
        attr(val) {
            console.log(val)
            // 清空表单
            if (this.isClear) {
                this.currentValue = ''
            }
            // 重置列表
             this.department = []
            val && this.getProjectInfo({ query: { branchComIds: [val] } })
        },
    },
}
</script>
